<template>
<div class="sdy-cartgord">
<SdyHander  title="啥都有 ~ 分类页面" back></SdyHander> 
 <div class="slide" ref="slide">
    <div class="inner"
    ref="inner"
    :style="{top:posY+'px'}" 
    @touchstart="startHandler" 
    @touchmove="moveHandler"
    @touchend="endHandler">
        <van-sidebar  v-model="index" @change="slideChangeHandler">
  <van-sidebar-item v-for="item in cateList "  :title=" item" />
        </van-sidebar>
    </div>
 </div>
<div class="content">
 <div class="item" v-for="item in goodsList">
    <p class="title">{{ item.brand }} </p>
    <ul>
        <li v-for="t in item.list">
            <img :src="t.img1" alt="">
            <span>名称</span>
        </li>
    </ul>

 </div>
</div>

 </div>
</template> 
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {categordListApi,cateBrandListApi,categoryBrandGoodListApi} from '@/api/goods'
//导入相关ts接口
import  type { MyCateBrandGoodsItem } from '@/config/interface'
  
//准备一个数据，表示当前触发的导航
const index = ref<number>(0)



//操作让侧边栏滑动+ 回弹
//准备变量
const startY = ref<number>(0)
const  moveY = ref<number>(0)
const  startTop = ref<number>(0)
const posY = ref<number>(0)
//拿到元素
const inner = ref<HTMLDivElement | null>(null)
const slide = ref<HTMLDivElement | null>(null)
//鼠标按下的事件
const startHandler = (e:TouchEvent) =>{
    //记录光标初始位置
startY.value = e.touches[0].clientY
    //记录元素初始位置
startTop.value= (inner.value as HTMLElement).offsetTop
// console.log(startTop.value);

}
//鼠标移动的事件
const moveHandler = (e:TouchEvent) =>{
 moveY.value = e.touches[0].clientY - startY.value
 //随着移动 ，实时操作posY数值
 posY.value = moveY.value + startTop.value
 //判断边界值
 if(posY.value >=100) posY.value=100
 if(posY.value <=
 -(inner.value as HTMLElement).offsetHeight -
 -(slide.value as HTMLElement).offsetHeight - 100
 ) posY.value = 
 -(inner.value as HTMLElement).offsetHeight -
 -(slide.value as HTMLElement).offsetHeight - 100
}
// 鼠标移出的事件
const endHandler = () =>{
 moveY.value = 0
 //上方回弹
 if(posY.value>=0) posY.value = 0
 //下方回弹
 if(posY.value <=
 -(inner.value as HTMLElement).offsetHeight -
 -(slide.value as HTMLElement).offsetHeight 
 ) posY.value = 
 -(inner.value as HTMLElement).offsetHeight -
 -(slide.value as HTMLElement).offsetHeight 
}
//准备一个右侧内容渲染的数组
 const  goodsList = ref<MyCateBrandGoodsItem[]>([])






//准备一个根据当前分类请求分类内所有相关数据的方法
  const getGoodList = async ( cate :string) =>{
    console.log(`我要根据${ cate} 去请求右边的所有需要准备的数据`);
    // 1.根据当前的cate  请求回来品牌列表
     const brandList = await cateBrandListApi(cate)
  
    //2.根据品牌列表内的所有内容 ，去请求商品列表
     const list:Promise<any>[] = []
        brandList.data.forEach((item:{brand:string}) =>{
            list.push(categoryBrandGoodListApi({category:cate, brand:item.brand }))
        })
        const goods = await Promise.all(list)
        
    //3.组装数据
        const res: MyCateBrandGoodsItem[]= []
        brandList.data.forEach((item:{ brand:string },index:number) =>{
         res.push({
            cate,
            brand:item.brand,
            list:goods[index].data
         })
        })

    goodsList.value = res
    console.log(res);
    

  }



//准备分类列表数组
const cateList = ref<string[]>([])
// slide导航切换事件
const slideChangeHandler = async (index: number)=>{
    //index表示当前切换的索引
    //只要从cateList中拿到对应的索引位置数据即可
    //拿到当前分类
    const cate =  cateList.value[index]
    getGoodList(cate)
    
        

  
             
              
   
    
}
 //挂载完毕的钩子函数
 onMounted( async () =>{
  const res = await  categordListApi()
  
  cateList.value = res.data
  //在渲染完毕以后
  getGoodList(res.data[0])


 })
</script>
<style scoped lang="scss">
.sdy-cartgord{
    display: flex;
    height: 100%;
    > .slide{
        height: 100%;
        // overflow-y: auto;
       position: relative;
       width: 80px;
       overflow: hidden;
       >.inner{
        position: absolute;
        left: 0;
       }
    }

    >.content{
        flex:1;
        overflow-y: auto;

     >.item{
        >.title{
        height: 30px;
        font-weight: 700;
     }
     >ul{
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        justify-content: space-evenly;
        >li{
            display: flex;
            flex-direction: column;
            align-items: center;
          >img{
            width: 50px;
            height: 50px;
            display: block;
          }  
        }
     }
        
    }
    }
}
</style>